<template>
  <div class="wyy-playlist">
    <div class="wyy-playlist-header">
      <div class="wyy-header-img">
        <van-image width="128" height="128" :src="header.headerUrl"/>
      </div>
      <div class="wyy-header-desc">
        <p class="wyy-header-title">{{header.headerName}}</p>
        <p class="wyy-header-creator"><van-image :src="header.headerAvatar" width="30" height="30" round class="wyy-creator-avatar"/><span class="wyy-creator-name">{{header.headerAvatarname}}</span></p>
      </div>
    </div>

    <div class="wyy-playlist-list">
      <div class="wyy-list-title">歌曲列表</div>
      <ul class="wyy-list-content">
        <li class="wyy--list-item" v-for="item in playList" :key="item.id">
          <router-link :to="{name: 'song', query: {id: item.id}}">
            <MusicItem :songData="songData(item)"/>
          </router-link>
        </li>
      </ul>
    </div>

    <div class="wyy-playlist-collect">
      <van-button class="wyy-collect-btn" round url="https://m.music.163.com/m/applink/?scheme=orpheus%3A%2F%2Fsong%2F2011061243">收藏歌单</van-button>
    </div>
  </div>
</template>

<script setup>
import MusicItem from '@/components/MusicItem.vue';
import request from '@/utils/request'
import { onMounted, ref, reactive, computed} from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
const playList = ref([])
const header = reactive({
  headerName: '',
  headerUrl: '',
  headerAvatar: '',
  headerAvatarname: ''
})
const songData = computed(() => {
    return (item) => {
      return {
        id: item.id,
        name: item.name,
        alias: item.alia.length ? item.alia[0] : '',
        sqMusic: item.sq ?? false,
        musicInfo: `${item.ar[0].name} - ${item.name}`
      }
    }
  })
//获取歌单详情
const getSongListDetail = async (id) => {
  let data = await request('/playlist/detail', 'get', {id})
  playList.value = data.playlist.tracks
  header.headerName = data.playlist.name
  header.headerUrl = data.playlist.coverImgUrl
  header.headerAvatarname = data.playlist.creator.nickname
  header.headerAvatar = data.playlist.creator.avatarUrl
}

onMounted (() => {
  const id = route.query.id
  getSongListDetail(id)
})
</script>
<style lang="scss" scoped>
  .wyy-playlist-header {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 188px;
    padding: 30px 15px;
    position: relative;
    &::after {
      content: '';
      width: 100%;
      height: 188px;
      position: absolute;
      top: 0;
      left: 0;
      background: url('https://p1.music.126.net/IT4aefi1vpg_zpi_4hG5cQ==/19152393044273353.jpg?imageView=1&type=webp&thumbnail=253x0') no-repeat center/cover;
      filter: blur(10px);
      z-index: -1;
    }
    .wyy-header-desc {
      width: 200px;
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      .wyy-header-title {
        font-size: 16px;
        color: #fffff9;
      }
      .wyy-creator-avatar {
        vertical-align: middle;
        margin-right: 5px;
      }

      .wyy-creator-name {
        font-size: 14px;
        vertical-align: middle;
        color: #fffff9;
      }

    }
  }
  .wyy-playlist-list {
    box-sizing: border-box;
    .wyy-list-title {
      box-sizing: border-box;
      background-color: #edf0f0;
      font-size: 12px;
      line-height: 25px;
      padding: 0 10px;
    }
  }
    .wyy-collect-btn {
      width: 315px;
      font-size: 18px;
      line-height: 38px;
      color: #fff;
      background-color: #ff3b3a;
      position: fixed;
      bottom: 1%;
      left: 50%;
      transform: translateX(-50%);
    }
  
</style>